<!--上传交付物-->
<template>
  <a-modal
    :visible="modalVisible_upload"
    title="上传交付物"
    centered
    @ok="submitDeliver"
    @cancel="closeModal"
    okText="确认"
    cancelText="取消"
  >
    <div class="tabBox">
      <a-tabs v-model='activeKey'>
        <a-tab-pane key="1" tab="从文件上传">
          <upload-from-folder @selectChange='selectChangeHandler' :singleSelect='singleSelect' :isSearch="true"></upload-from-folder>
        </a-tab-pane>
        <a-tab-pane key="2" tab="从本地上传">
          <common-upload class='local-upload' :oid='oid' @selectFileType='selectFileTypeHandler' @selectFileAddress='selectFileAddressHandler'
            @handleUpload='handleUploadHandler' @handleRemove='handleRemoveHandler'></common-upload>
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-modal>
</template>
<script>
import { uploadFromLocal } from "@api/planComponent";
import commonUpload from '@/components/common/commonUpload'
import uploadFromFolder from './src/components/uploadFromFolder'
export default {
  name: "index",
  components: { commonUpload, uploadFromFolder },
  data() {
    return {
      selType: '',
      saveId: '',
      uploadFile: null ,
      activeKey: "1",
      modalVisible_upload: this.uploadModalVisible,//弹框显隐
      data: [],
      folderCheckList: []
    };
  },
  watch: {
    uploadModalVisible(val) {
      this.modalVisible_upload = val
    }
  },
  computed: {
    oid() {
      return sessionStorage.getItem('oid')
    }
  },
  props: {
    uploadModalVisible: {
      type: Boolean,
      default: false
    },//上传交付物modal可见
    singleSelect: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    //选择文件类型
    selectFileTypeHandler(fileType) {
      this.selType = fileType
    },
    //文件存放位置
    selectFileAddressHandler(filePosition) {
      this.saveId = filePosition[filePosition.length - 1]
    },
    //文件上传
    handleUploadHandler(file) {
      this.uploadFile = file
    },
    //文件移除
    handleRemoveHandler(obj) {
      console.log('remove',obj)
    },
    //关闭弹框
    closeModal() {
      this.$emit('closeUploadModal')
    },
    selectChangeHandler(value) {
      this.folderCheckList = value
    },
    //提交交付物
    submitDeliver() {
      if(this.activeKey == 1) {
        //从文件上传
        if (this.folderCheckList.length == 0) {
          this.$message.error('请选择文件类型和文件存放位置后上传!')
          return
        }
        this.$emit('submitDeliver',this.folderCheckList[0], this.folderCheckList)
      }else {
        //从本地上传
        if (this.selType == '' || this.saveId == '') {
          this.$message.error('请选择文件类型和文件存放位置后上传!')
          return
        }
        if (this.uploadFile == null) {
          this.$message.error('请选择上传文件!')
          return
        }
        let params = new FormData()
        params.append('userId', JSON.parse(sessionStorage.getItem('userInfo')).loginName)
        params.append('docType', this.selType)
        params.append('folderOid', this.saveId)
        params.append('1_file', this.uploadFile)
        uploadFromLocal(params).then(res => {
          if (res.data.success != undefined && res.data.success) {
            let result = res.data.data[0];
            result.state = '正在工作'
            this.$emit('submitDeliver',result)
            // this.$message.success('上传成功')
          }else {
            this.$message.error(res.data.message)
          }
        })
      }
    },
  }
}
</script>
<style lang="less" scoped>
.local-upload {
  padding: 0 170px
}
/deep/ .ant-modal {
  width: 900px !important;
}
/deep/ .ant-modal-body {
  padding: 8px;
  height: 460px!important;
}
/deep/ .ant-modal-mask {
  background-color: rgba(0, 0, 0, 0.15);
}
//关闭样式
/deep/ .ant-tree-switcher_close {
  background: url("~@assets/todo/jiahao.svg") no-repeat;
  i {
    display: none;
  }
}
/deep/ .ant-table-wrapper {
  height: 360px;
  overflow-y: auto;
}
//打开样式
/deep/ .ant-tree-switcher_open {
  background: url("~@assets/todo/jianhao.svg") no-repeat;
  i {
    display: none;
  }
}
/deep/.ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle{
  width: 16px;
  height: 16px;
  margin-top: 5px;
}
/deep/.ant-tree{
  height: 340px;
  overflow: auto;
  margin: 5px 0px 5px 10px;
}
/deep/.ant-upload-list-item-name{
  text-align: left;
}
/deep/.ant-upload .ant-upload-drag{
  height: 150px;
}
/deep/.ant-upload.ant-upload-drag .ant-upload{
  padding: 16px 0;
}
/deep/.ant-upload-list{
  margin: 10px 0px 10px 0px;
  height: 120px;
  overflow: auto;
}
/deep/.ant-upload.ant-upload-drag p.ant-upload-text{
  font-size: 14px;
  color: #00000073;
}
/deep/.ant-cascader-picker-arrow{
  width: 16px;
  height: 16px;
  margin-top: -8px;
}
.tabBox {
  /deep/ .ant-tabs-nav {
    display: flex;
  }
  /deep/ .ant-tabs-nav .ant-tabs-tab {
    padding: 5px 9px;
  }
  .tabTreeName {
    width: 100%;
    height: 30px;
    font-size: 16px;
    padding-left: 10px;
    color: #333333;
  }
  .tabTreeContent {
    width: 100%;
    height: 360px;
    border: 1px solid #dddddd;
    border-radius: 5px;
  }
}
.localUpload_content {
  width: 78%;
  height: 390px;
  margin: 0 auto;
  .content-name {
    text-align: left;
    line-height: 50px;
    font-size: 14px;
    color: #333333;
  }
}
</style>